<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
    <title>一道简单的试题的后台</title>
    <link rel="stylesheet" href="static/codemirror/codemirror.css">
    <link rel="stylesheet" href="static/codemirror/theme/monokai.css">
    <script src="static/codemirror/codemirror.js"></script>
    <script src="static/codemirror/mode/javascript/javascript.js"></script>
    <script src="static/socketio/socket.io.min.js"></script>

</head>
<body>


<textarea id="codeArea"></textarea>

<div style="margin-top: 20px">
    <select id="txt_name">
        <% users.forEach(function(user){ %>
        <option value="<%= user %>"><%= user %></option>
        <% }); %>
    </select>
    <button class="btn-get" onclick="getCode()">获取数据</button>
</div>

<script>
    var editor = CodeMirror.fromTextArea(document.getElementById("codeArea"), {
        lineNumbers: true,
        mode: "javascript",
        autoCloseBrackets: true,
        matchBrackets: true,
        theme: "monokai",
        readOnly: true
    });

    var socket = io(location.href);


    socket.on('onCodeChange', function (data) {
        console.log(data)

        if(document.getElementById('txt_name').value===data.name){
            editor.setValue(data.msg)
        }
    })

    function getCode(){
        socket.emit('getCode',{
            name: document.getElementById('txt_name').value
        })
    }

</script>
</body>
</html>